import {classnames, computed, designPage, reactive} from 'plain-design-composition'
import './ManagerBell.less'
import React from "react";
import {PlIcon, PlScroll, PlTag} from "plain-design";

export const ManagerBellData = (() => {

    const imgs = {
        assistant: <div className="pro-manager-bell-msg-img" style={{backgroundColor: '#fe5d59'}}><PlIcon icon={'el-icon-chat-dot-square'}/></div>,
        opportunity: <div className="pro-manager-bell-msg-img" style={{backgroundColor: '#ffce3e'}}><PlIcon icon={'el-icon-s-opportunity'}/></div>,
        advertise: <div className="pro-manager-bell-msg-img" style={{backgroundColor: '#b7dedd'}}><PlIcon icon={'el-icon-s-promotion'}/></div>,
        ticket: <div className="pro-manager-bell-msg-img" style={{backgroundColor: '#3191e5'}}><PlIcon icon={'el-icon-s-ticket'}/></div>,
        shop: <div className="pro-manager-bell-msg-img" style={{backgroundColor: '#fe5d59'}}><PlIcon icon={'el-icon-s-shop'}/></div>,
    }

    const tags = {
        wait: <PlTag label={'未开始'} status={'info'} size={'mini'} mode={'stroke'}/>,
        process: <PlTag label={'进行中'} status={'primary'} size={'mini'} mode={'stroke'}/>,
        delay: <PlTag label={'已延期'} status={'warn'} size={'mini'} mode={'stroke'}/>,
        cancel: <PlTag label={'已取消'} status={'error'} size={'mini'} mode={'stroke'}/>,
        done: <PlTag label={'已完成'} status={'success'} size={'mini'} mode={'stroke'}/>,
    }

    const todoTypes = {
        dev: <PlTag label={'功能开发'} status={'success'} size={'mini'} mode={'stroke'}/>,
        bug: <PlTag label={'BUG修复'} status={'warn'} size={'mini'} mode={'stroke'}/>,
        immediate: <PlTag label={'紧急处理'} status={'error'} size={'mini'} mode={'stroke'}/>,
        change: <PlTag label={'需求变更'} status={'primary'} size={'mini'} mode={'stroke'}/>,
        optimize: <PlTag label={'功能优化'} status={'success'} size={'mini'} mode={'stroke'}/>,
    }

    const messages = {
        name: '最近消息',
        data: [
            {
                title: '职言小助手·官方',
                message: '同事圈内容更新提醒',
                time: '2021-05-07',
                img: imgs.assistant,
            },
            {
                title: '机遇小助手·官方',
                message: 'hi~, 有15家公司正在挖掘目标人才，这些职位很适合您。',
                time: '2021-04-25',
                img: imgs.opportunity,
            },
            {
                title: '英孚教育·广告',
                message: '英语有多好，职场就有多强大！',
                time: '2021-04-21',
                img: imgs.advertise,
            },
            {
                title: '红包助手·官方',
                message: '送您一个可提现红包。',
                time: '2021-03-19',
                img: imgs.ticket,
            },
            {
                title: '机会来啦',
                message: '这里有您最匹配的机会，最前瞻的报告',
                time: '2021-02-22',
                img: imgs.shop,
            },
        ],
        render() {
            return this.data.map((item, index) => (
                <div className="pro-manager-bell-item" key={index}>
                    {item.img}
                    <div className="pro-manager-bell-item-info">
                        <div>
                            <span>{item.title}</span>
                            <span>{item.time}</span>
                        </div>
                        <div>{item.message}</div>
                    </div>
                </div>
            ))
        },
        foot: () => <>
            <div><PlIcon icon="el-icon-brush"/> 清空消息</div>
            <div><PlIcon icon="el-icon-more"/>更多消息</div>
        </>
    }

    const todos = {
        name: '代办事项',
        data: [
            {
                name: '微前端架构改造',
                desc: '完成微前端与堆叠式路由的整合，接入传统路由的单页面应用。',
                type: todoTypes.dev,
                tag: tags.process,
            },
            {
                name: '抽离小程序组件以及API',
                desc: '将企业微信小程序工程中封装的组件以及API独立出来，单独打包以及发布供各个项目使用。',
                type: todoTypes.optimize,
                tag: tags.wait,
            },
            {
                name: '流程编辑器插件加载失败',
                desc: '微前端架构下，审批管理中的流程编辑器插件初始化异常，需要立即处理，并报告本次线上事故。',
                type: todoTypes.immediate,
                tag: tags.done,
            },
            {
                name: '页面字体大小不正确',
                desc: '个人中心中，标题字体大小应该为28px。',
                type: todoTypes.change,
                tag: tags.delay,
            },
            {
                name: '列表的列宽异常',
                desc: '列表的列标题拖拽调整列宽异常，拖拽结束之后的宽度非预期宽度',
                type: todoTypes.bug,
                tag: tags.cancel,
            },
        ],
        render() {
            return this.data.map((item, index) => (
                <div className={'pro-manager-bell-item'} key={index}>
                    <div className="pro-manager-bell-item-info">
                        <div>
                            <span>{item.name}</span>
                            <div>
                                {item.tag}
                                {item.type}
                            </div>
                        </div>
                        <div>{item.desc}</div>
                    </div>
                </div>
            ))
        },
        foot: () => <>
            <div><PlIcon icon="el-icon-brush"/>清空代办</div>
            <div><PlIcon icon="el-icon-more"/>更多代办</div>
        </>
    }

    const types = [
        messages,
        todos,
    ]

    return {
        types,
        messages,
        todos,
    }
})();

export const ManagerBell = designPage(() => {

    const state = reactive({
        name: ManagerBellData.types[0].name,
    })

    const content = computed(() => ManagerBellData.types.find(i => i.name === state.name)!)

    return () => (
        <div className="manager-bell-wrapper">
            <div className="manager-bell-head">
                {ManagerBellData.types.map(i => (
                    <div key={i.name}
                         onClick={() => state.name = i.name}
                         className={classnames({'pl-text-primary': state.name === i.name,})}>
                        {i.name}
                    </div>
                ))}
            </div>
            <div className="manager-bell-content">
                <PlScroll fitHostWidth>
                    <div className="manager-bell-body">
                        {content.value.render()}
                    </div>
                </PlScroll>
            </div>
            <div className="manager-bell-foot">
                {content.value.foot()}
            </div>
        </div>
    )
})